<!-- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0

ABOUT THIS NODE.JS EXAMPLE: This example works with AWS SDK for JavaScript version 3 (v3),
which is available at https://github.com/aws/aws-sdk-js-v3. This example is in the 'AWS SDK for JavaScript v3 Developer Guide' at
https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/video-analyzer.html.

Purpose:
index.html is front end HTML for a tutorial demonstrating how to build a web app that analyzes videos for label detection using the
JavaScript SDK for JavaScript v3.
-->

<!-- snippet-start:[rekognition.HTML.video-analyzer.complete]-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="site-head">
    <meta charset="UTF-8" />
    <link rel="icon" href="../public/images/favicon.ico" />
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="./js/main.js" ></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <link rel="stylesheet" href="../css/styles.css" th:href="@{/css/styles.css}" />
    <link rel="icon" href="../images/favicon.ico" th:href="@{/images/favicon.ico}" />
    <html xmlns:th="http://www.thymeleaf.org" >
    <link href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
    <script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div id="upload">
    <div class="container">
        <h2>AWS Video Analyzer application</h2>
        <p>Upload a video to an Amazon S3 bucket that will be analyzed!</p>
        <input id="videoupload" type="file" name="file" /><br/><br/>
        <button id="addvideo" onclick="uploadVideo()">Add video</button>
        </form>
        <div>
            <br>
            <p>Choose the following button to get information about the video to analyze.</p>
            <button onclick="getVideo()">Show Video</button>
            <table id="myTable" class="display" style="width:100%">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Owner</th>
                    <th>Date</th>
                    <th>Size</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td id="videoname">No Data</td>
                    <td id ="videoowner">No Data</td>
                    <td id ="videodate">No Data </td>
                    <td id ="videosize">No Data</td>
                </tr>
                </tbody>
                <div id="success3"></div>
            </table>
        </div>
    </div>
</div>
<div id="analyze"  >
    <div class="container">
        <p>You can generate a report that analyzes a video in an Amazon S3 bucket. You can send the report to the following email address. </p>
        <label for="email">Email address:</label><br>
        <input type="text" id="email" name="email" value=""><br>
        <div>
            <br>
            <p>Click the following button to analyze the video and obtain a report</p>
            <button id="button" onclick="ProcessImages()">Analyze Video</button>
        </div>
        <div id="spinner">
            <p>Report is being generated:</p>
        </div>
    </div>
</div>
</div>
<script src="./js/main.js" ></script>
</body>
</html>
<!-- snippet-end:[rekognition.HTML.video-analyzer.complete]-->
